<template>
  <div
    class="course-panel"
    draggable="true"
    @dragstart="dragStartHandle"
    @dragend="dragEndHandle"
    :data-key="courseKey"
  >
    <h1>{{ courseName }}</h1>
    <span class="remove-btn">x</span>
  </div>
</template>

<script lang="ts" setup>
const { courseName } = defineProps<{
  courseName: string
  courseKey: string
}>()

const Emit = defineEmits<{
  (e: 'dragEndHandle', data: HTMLElement): void
}>()

const dragStartHandle = (e: Event) => {
  const tar = e.target as HTMLElement
  tar.style.opacity = '0.6'
}
const dragEndHandle = (e: Event) => {
  const tar = e.target as HTMLElement
  tar.style.opacity = '1'

  console.log(tar, 'eeee')

  Emit('dragEndHandle', tar)
}
</script>

<style lang="scss" scoped>
.course-panel {
  position: relative;
  width: 150px;
  height: 100px;
  background-color: orange;
  margin: 10px auto;
  padding: 10px;
  box-sizing: border-box;
  cursor: move;

  h1 {
    font-size: 20px;
    font-weight: normal;
    text-align: center;
  }

  .remove-btn {
    position: absolute;
    top: 0px;
    right: 10px;
    color: #fff;
  }
}
</style>
